<template>
	<div>
		<a-form-model ref="ruleForm" :model="adminForm" :rules="rules" v-bind="layout">
			<a-form-model-item has-feedback label="username" prop="username">
				<a-input v-model="adminForm.username" type="username" autocomplete="off" />
			</a-form-model-item>
			<a-form-model-item has-feedback label="password" prop="password">
				<a-input v-model="adminForm.password" type="password" autocomplete="off" />
			</a-form-model-item>
			<a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
				<a-button type="primary" @click="submitForm('ruleForm')">
					确认
				</a-button>
				<a-button style="margin-left: 10px" @click="resetForm('ruleForm')">
					重置
				</a-button>
			</a-form-model-item>
		</a-form-model>
	</div>
</template>

<script>
	import md5 from 'js-md5'
	import {addAdmin} from '../../../api/Admin.js'
	export default {
		name: 'AdminAdd',
		data() {
			return {
				adminForm: {
					username: '',
					password: '',
				},
				rules: {
					username: [{
							required: true,
							message: '请输入账户',
							trigger: 'blur'
						},
						{
							min: 3,
							max: 16,
							message: '账号的长度必须为 3 到 16',
							trigger: 'blur'
						},
					],
					password: [{
						required: true,
						message: '请务必输入密码',
						trigger: 'blur'
					},
					{
						min: 3,
						max: 32,
						message: '密码的长度必须为 3 到 32',
						trigger: 'blur'
					}]
				},
				layout: {
					labelCol: {
						span: 4
					},
					wrapperCol: {
						span: 14
					},
				},
			}
		},
		methods: {
			submitForm(formName) {
				this.$refs[formName].validate(async valid => {
					if (valid) {
						const {data : res} = await addAdmin({
							username: this.adminForm.username,
							password: md5(this.adminForm.password)
						})
						if (res.code !== 20006)  {
							this.$message.error('添加出错')
							return this.$emit('close',false)
						}
						this.$message.success(res.msg)
					} else {
						console.log('error submit!!');
						return false;
					}
				});
				this.$emit('close',false)
			},
			resetForm(formName) {
				this.$refs[formName].resetFields();
				this.$emit('close',false)
			},
		}
	}
</script>

<style>
</style>
